UI: Add Heading/Radius editors, ContainerBars, expanded Preview sections, shade strip and fold-state persistence - #398

Walkthrough

Adds foldState.js for localStorage-backed collapse persistence, wires it into ScaleGenerator (new collapsible prop) and SmartSettings. Introduces three new domain editor components (HeadingEditor, RadiusEditor, ContainerBars) and an inline shade strip in BrandColorRow. Restructures DomainPanel to route to these editors and relocates live preview to an expanded Preview.svelte hub with six new sections (gradients, spacing, borders, shadows, motion, effects).

Changes

Configurator domain editors and Preview Hub expansion

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• codeslash-dev/SLASHED#371: Introduced the inline DomainPreview accordion logic wired to DOMAIN_PREVIEWS in DomainPanel.svelte that this PR removes and relocates to the Preview Hub.
• codeslash-dev/SLASHED#328: Both PRs restructure Preview.svelte's tabbed section navigation (SECTIONS, activeSection, domain routing) and add new rendered section blocks.
• codeslash-dev/SLASHED#382: Introduced SmartSettings.svelte panels that this PR now wires to fold-state persistence via getFold/setFold.

❌ Failed checks (1 warning)

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

• X
• Mastodon
• Reddit
• LinkedIn

• Adds three new Svelte components: HeadingEditor (tabbed per-level typography editor with live
 specimens), RadiusEditor (tabbed radius editor with shape previews), and ContainerBars
 (proportional width comparison bars for container tokens).
• Enhances BrandColorRow with a 7-step inline shade strip that measures live effective colors via
 measureBackground/setProbeContext.
• Introduces foldState.js for localStorage-backed open/closed persistence, wired into
 ScaleGenerator (new collapsible prop) and SmartSettings section `` elements.
• Reworks DomainPanel to replace the old inline DomainPreview with the new focused editors and
 routes generator/knob layout accordingly.
• Expands Preview.svelte with six new sections (Gradients, Spacing, Borders, Shadows, Motion,
 Effects) and a DOMAIN_TO_SECTION map that auto-scrolls the preview tab to match the active domain.

graph TD
  DP["DomainPanel.svelte"] --> HE["HeadingEditor.svelte"]
  DP --> RE["RadiusEditor.svelte"]
  DP --> CB["ContainerBars.svelte"]
  DP --> SG["ScaleGenerator.svelte"]
  DP --> SS["SmartSettings.svelte"]
  SG --> FS["foldState.js"]
  SS --> FS
  BCR["BrandColorRow.svelte"] --> PH(["probeHost.js"])
  PV["Preview.svelte"] --> STORE[("store.svelte.js")]
  DP --> STORE
  HE --> STORE
  CB --> STORE
  FS --> LST[("localStorage")]

  subgraph Legend
    direction LR
    _f["Svelte Component"] ~~~ _s(["JS Module"]) ~~~ _db[("Storage")]
  end

Loading

The PR's approach is well-suited to the problem. Dedicated per-domain editor components (HeadingEditor, RadiusEditor, ContainerBars) give users focused, contextual UIs without bloating a single panel. The lightweight foldState.js module (outside Svelte reactivity) is the right call for cross-file persistence without coupling to the store. Alternatives considered: (1) storing fold state in the Svelte store — rejected because it would reset on page reload without extra serialization logic; (2) using a single mega-panel with all token rows — rejected as it was the previous approach and lacked visual context. The chosen decomposition is clean and extensible.

Enhancement (4) +479 / -5

BrandColorRow.svelteAdd 7-step inline shade strip with live color measurement +52/-2

Add 7-step inline shade strip with live color measurement

• Imports 'measureBackground'/'setProbeContext' and the 'ui' store to reactively measure effective shade colors. Renders a full-width 7-swatch strip below each brand color row, showing the superlight→superdark ramp with a checkerboard fallback for unmeasured slots. Grid layout gains a second row to accommodate the strip.

configurator/src/components/BrandColorRow.svelte

Preview.svelteAdd Gradients, Spacing, Borders, Shadows, Motion, and Effects preview sections +399/-1

Add Gradients, Spacing, Borders, Shadows, Motion, and Effects preview sections

• Adds six new named sections to the preview tab, each with multiple 'pv__block' subsections demonstrating the relevant tokens on real UI patterns (elevation cards, blur boxes, motion animations, scrim overlays, etc.). Introduces a 'DOMAIN_TO_SECTION' map and a '$effect' that auto-switches the active section when the user changes domain in the left panel.

configurator/src/components/Preview.svelte

ScaleGenerator.svelteAdd optional collapsible mode with persisted fold state +22/-1

Add optional collapsible mode with persisted fold state

• Adds a 'collapsible' prop; when true, a chevron toggle button is rendered in the header and the body is conditionally shown. Open/closed state is read from and written to 'foldState.js' using a 'generator:<kind>' key.

configurator/src/components/ScaleGenerator.svelte

SmartSettings.sveltePersist section <details> open/closed state via foldState +6/-1

Persist section <details> open/closed state via foldState

• Replaces the hardcoded 'open' attribute on each '<details>' element with 'getFold(domainId:sectionId, false)' for initial state and an 'ontoggle' handler that calls 'setFold' on change.

configurator/src/components/SmartSettings.svelte

Refactor (1) +28 / -36

DomainPanel.svelteReplace inline DomainPreview with focused domain editors and restructured zones +28/-36

Replace inline DomainPreview with focused domain editors and restructured zones

• Removes 'DomainPreview' and its 'showPreview' state; imports 'HeadingEditor', 'RadiusEditor', and 'ContainerBars'. Rewrites Zone 1 so typography uses 'HeadingEditor', borders use 'RadiusEditor', layout uses 'ContainerBars', and generator domains render a collapsible 'ScaleGenerator'. Simplifies the knob placement logic.

configurator/src/components/DomainPanel.svelte

Other (6) +564 / -2

ContainerBars.svelteNew component: proportional container-width comparison bars +117/-0

New component: proportional container-width comparison bars

• New component that renders a labeled bar chart for the five '--sf-container-*' tokens, converting rem/ch/em/% values to approximate pixel widths and scaling bars proportionally. Modified tokens are highlighted with an accent inset shadow.

configurator/src/components/ContainerBars.svelte

HeadingEditor.svelteNew component: tabbed heading/body/mono typography editor with live specimens +203/-0

New component: tabbed heading/body/mono typography editor with live specimens

• New tabbed editor covering H1–H6, Body, and Mono tabs. Each tab shows a live specimen rendered with the active token values and a list of 'TokenRow' inputs. The 'All' tab renders all heading levels plus a body paragraph in a single specimen. Modified tabs display a dot indicator.

configurator/src/components/HeadingEditor.svelte

RadiusEditor.svelteNew component: tabbed radius editor with live shape specimens +197/-0

New component: tabbed radius editor with live shape specimens

• New tabbed editor for the 10 '--sf-radius-*' levels (2xs through full). The 'All' tab shows all shapes side-by-side; individual tabs show a larger specimen plus a mini-button row for quick navigation. Includes a 'TokenRow' for the global '--sf-radius-scale' multiplier.

configurator/src/components/RadiusEditor.svelte

foldState.jsNew utility: localStorage-backed fold-state persistence helper +45/-0

New utility: localStorage-backed fold-state persistence helper

• Provides 'getFold(key, default)' and 'setFold(key, open)' backed by a single 'localStorage' entry ('slashed-configurator/fold/v1'). Initialised eagerly at module load; deliberately outside Svelte's reactivity system for portability.

configurator/src/lib/foldState.js

badge-essential.jsonUpdate essential bundle gzip size badge +1/-1

Update essential bundle gzip size badge

• Updates the displayed gzip size from 56.2 kB to 15.6 kB.

dist/badge-essential.json

badge-optimal.jsonUpdate optimal bundle gzip size badge +1/-1

Update optimal bundle gzip size badge

• Updates the displayed gzip size from 64.1 kB to 17.9 kB.

dist/badge-optimal.json

Description

Preview’s domain→section sync only updates activeSection when ui.domain exists in
DOMAIN_TO_SECTION; tool domains like themes, setup, wcag, and cheatsheet are valid
ui.domain values but are unmapped. Navigating to these domains can leave the preview stuck showing
an unrelated prior section.

Code

configurator/src/components/Preview.svelte[R62-81]

+  const DOMAIN_TO_SECTION = {
+    home:       'overview',
+    colors:     'colors',
+    gradients:  'gradients',
+    typography: 'typography',
+    spacing:    'spacing',
+    layout:     'layout',
+    borders:    'borders',
+    shadows:    'shadows',
+    motion:     'motion',
+    effects:    'effects',
+    misc:       'tokens',
+  };
+
  let activeSection = $state('overview');

+  $effect(() => {
+    const sec = DOMAIN_TO_SECTION[ui.domain];
+    if (sec) activeSection = sec;
+  });

Relevance

⭐⭐ Medium

No historical evidence on DOMAIN_TO_SECTION handling tool domains; preview-domain sync not
previously reviewed.

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Preview.svelte only updates activeSection when DOMAIN_TO_SECTION[ui.domain] is defined, but
domains.js defines additional domain ids (tool domains) that can become ui.domain and are not
mapped.

configurator/src/components/Preview.svelte[46-82]
configurator/src/lib/domains.js[376-402]
configurator/src/lib/store.svelte.js[40-49]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Preview auto-section selection doesn’t handle all valid `ui.domain` values; for unmapped domains the preview retains the previous section.

### Issue Context
`ui.domain` includes tool domains (wcag/themes/setup/cheatsheet). The preview should either map these explicitly or fall back deterministically (e.g., overview).

### Fix
Add missing domain mappings and/or set a safe default when `DOMAIN_TO_SECTION[ui.domain]` is undefined.

### Fix Focus Areas
- configurator/src/components/Preview.svelte[62-82]
- configurator/src/lib/domains.js[376-402]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

foldState.js loads _state from JSON into a normal object and uses key in _state plus
_state[key] = open; special keys like __proto__ can behave unexpectedly on normal objects. This
is low-risk today (keys appear internal), but it’s fragile and easy to harden.

Code

configurator/src/lib/foldState.js[R12-35]

+const FOLD_KEY = 'slashed-configurator/fold/v1';
+
+let _state = {};
+
+if (typeof localStorage !== 'undefined') {
+  try {
+    const raw = localStorage.getItem(FOLD_KEY);
+    if (raw) { const parsed = JSON.parse(raw); if (parsed && typeof parsed === 'object') _state = parsed; }
+  } catch { /* ignore */ }
+}
+
+function _persist() {
+  try { localStorage.setItem(FOLD_KEY, JSON.stringify(_state)); } catch { /* ignore */ }
+}
+
+/**
+ * Read the persisted open state for a section.
+ * @param {string} key     Unique section identifier.
+ * @param {boolean} [def]  Returned when no stored value exists (default false).
+ * @returns {boolean}
+ */
+export function getFold(key, def = false) {
+  return key in _state ? Boolean(_state[key]) : def;
+}

Relevance

⭐⭐ Medium

No historical evidence on hardening localStorage JSON objects against __proto__/prototype pollution;
acceptance unclear.

PR-#303

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

foldState assigns parsed JSON directly to _state, checks membership via key in _state, and
writes via _state[key] = open, all of which are sensitive to special keys on normal objects.

configurator/src/lib/foldState.js[12-45]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
foldState persists into a plain object and uses `key in _state` and `_state[key] = ...`, which has special-key edge cases on normal objects.

### Issue Context
While current callers supply internal keys, hardening avoids future regressions if keys ever become influenced by user input or corrupted storage.

### Fix
Store fold state in a null-prototype map and use an own-property check (e.g., `Object.hasOwn`). Optionally ignore dangerous keys on set.

### Fix Focus Areas
- configurator/src/lib/foldState.js[14-45]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

SmartSettings and ScaleGenerator now bind <details>/collapsible UI to `open={getFold(...,
false)}, which evaluates to false` when there is no persisted localStorage entry and causes these
sections to render collapsed on first visit. Because DomainPanel enables collapsible for
generator domains (typography/spacing), this behavior change broadly hides key editing controls by
default compared to the prior always-open UI.

Code

configurator/src/components/SmartSettings.svelte[R69-73]

+      <details
+        class="cfg-card smart__section"
+        open={getFold(`${domainId}:${section.id}`, false)}
+        ontoggle={(e) => setFold(`${domainId}:${section.id}`, e.currentTarget.open)}
+      >

Relevance

⭐ Low

ScaleGenerator previously changed to start collapsed by default as intended UX; likely keep
collapsed-by-default behavior.

PR-#337

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The cited components read fold state via getFold(..., false) and use that value directly to
determine whether the <details> (in SmartSettings) or the generator body (in ScaleGenerator
when collapsible is true) is open; for new users or new fold keys, getFold falls back to
false, so the UI starts closed. Since DomainPanel mounts generator domains with collapsible
enabled, the ScaleGenerator collapsed-by-default behavior applies widely across generator-based
editing screens, making the first-load experience hide the controls unless a prior toggle was
persisted.

configurator/src/components/SmartSettings.svelte[66-73]
configurator/src/lib/foldState.js[27-35]
configurator/src/components/ScaleGenerator.svelte[31-44]
configurator/src/components/DomainPanel.svelte[223-252]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
SmartSettings and ScaleGenerator currently default their collapsible sections to **closed** because they initialize `open` from `getFold(key, false)`, which returns `false` when no persisted value exists. This changes behavior from the previous always-open presentation and hides important controls for first-time users.

## Issue Context
- `SmartSettings` uses `getFold(..., false)` directly in the `<details>` `open` attribute, so new keys render collapsed by default.
- `ScaleGenerator` also uses `getFold(foldKey, false)` in collapsible mode, and its body visibility is gated by `open`.
- `DomainPanel` enables `collapsible` for generator domains (e.g., typography/spacing), so the collapsed-by-default generator impacts core editing UI broadly.

## Fix Focus Areas
- configurator/src/components/SmartSettings.svelte[69-73]
- configurator/src/components/ScaleGenerator.svelte[40-44]
- configurator/src/lib/foldState.js[33-35]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

BrandColorRow calls setProbeContext inside its per-row $effect, even though App.svelte
already keeps the singleton probe host in sync with overrides/theme. This adds repeated signature
computation work per row per change (even when the host won’t update because the signature is
unchanged).

Code

configurator/src/components/BrandColorRow.svelte[R81-90]

+  $effect(() => {
+    for (const k in overrides) void overrides[k];
+    void ui.previewTheme;
+    queueMicrotask(() => {
+      setProbeContext({ overrides, theme: ui.previewTheme });
+      shadeColors = SHADE_SUFFIXES.map((s) => {
+        const rgb = measureBackground(`var(--sf-color-${colorKey}${s})`);
+        return rgb && rgb !== 'rgba(0, 0, 0, 0)' ? rgb : null;
+      });
+    });

Relevance

⭐ Low

They recently added per-component setProbeContext before measureBackground (ShadeRamp) and accepted
similar effect patterns.

PR-#388
PR-#369

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

App.svelte already calls setProbeContext({ overrides, theme }) reactively. probeHost’s
setProbeContext builds an expensive signature from sorted override keys/values; BrandColorRow
triggers that extra computation per row despite the singleton design.

configurator/src/components/BrandColorRow.svelte[77-91]
configurator/src/App.svelte[104-113]
configurator/src/lib/probeHost.js[58-65]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
BrandColorRow redundantly calls `setProbeContext()` even though App.svelte already updates the probe host globally; this can add avoidable overhead on each override/theme change.

### Issue Context
`setProbeContext` computes a sorted key/value signature each call; doing that per BrandColorRow can be costly.

### Fix
Remove the row-level `setProbeContext` call (or guard it behind a shared/once-per-tick updater) and rely on the App-level probe context maintenance.

### Fix Focus Areas
- configurator/src/components/BrandColorRow.svelte[81-91]
- configurator/src/App.svelte[104-113]
- configurator/src/lib/probeHost.js[58-65]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools